<template>
    <div class="dome-container">
        <dome-search v-model="form" :searchFunc="searchFunc"></dome-search>
        <el-button class="filter-item" @click="handleCreate">添加</el-button>
        <v-dialog :title="dialogObj.title" :close-stattus="dialogObj.close" :handle-confirm-func="handleConfirm" :close-click-func="closeClick" :show-footer="true" :show.sync="dialogObj.visible">
            <template #content>
                <el-form ref="dialogObjForm" :rules="rules" :model="dialogObj.form" size="mini" label-width="90px">
                <el-row>
                    <el-col :span="24">
                    <el-form-item label="分类名称：">
                        <el-input v-model="dialogObj.form.categoryName" placeholder="请输入分类名称" />
                    </el-form-item>
                    </el-col>
                    <el-col :span="24">
                    <el-form-item label="分类属性：">
                        <el-radio-group v-model="dialogObj.form.categoryProperty">
                        <el-radio :label="1">易耗品</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    </el-col>
                    <el-col :span="24">
                    <el-form-item label="备注：">
                        <el-input v-model="dialogObj.form.remark" placeholder="请输入..." type="textarea" />
                    </el-form-item>
                    </el-col>
                </el-row>
                </el-form>
            </template>
        </v-dialog>
    </div>
</template>

<script>
    import vDialog from '@/components/v-dialog.vue'
    import domeSearch from './components/dome-search.vue';
    import vText from '@/components/v-text.vue';
    import bus from '@/components/eventbus.js'

    export default {
        components: { vDialog,domeSearch,vText },
        data() {
            return {
                form:{},    //搜索
                sty: '',
                dialogObj: {
                    close: false,
                    title: '',
                    visible: false,
                    form: {},
                    confirmName: '确 定' // 修改提交文字，如不需要，可去掉:confirmName="dialogObj.confirmName"配置项
                },
                rules: {
                    // 校验规则
                },
            }
        },
        mounted() {

        },
        methods: {
            handleCreate() {
                this.dialogObj.form = {}
                this.dialogObj.title = '新增'
                bus.$emit('sty', 'add')
                this.dialogObj.visible = true
                this.$nextTick(() => {
                    this.$refs['dialogObjForm'].clearValidate()
                })
            },
            // 保存
            handleConfirm(sty) {
                if (sty === 'add') {
                    this.dialogObj.visible = false
                    return
                    this.$refs['dialogObjForm'].validate(valid => {
                    if (valid) {
                        this.dialogObj.visible = false
                    } else {
                        return false
                    }
                    })
                } else if (sty === 'edit') {
                    this.dialogObj.visible = false
                }
            },
            // 关闭
            closeClick() {
                this.dialogObj.visible = false
            },
            //搜索事件
            searchFunc() {
                // 查询触发函数，通过bus唤起getList。Author by clj. on 2020.4.18
            },
        }
    }
</script>
<style scoped rel="stylesheet/scss" lang="scss">
    .dome-container {
        margin: 10px 20px 0;
        overflow: hidden;
    }
</style>
